<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信营销1-创建1</title>
	<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">	
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="<%=path%>/css/marketing/s_style.css" rel="stylesheet">
    <link href="<%=path%>/css/mushroom.css" rel="stylesheet">
    <style> 
        .yellow_circle{
            width: 120px;
            height: 120px;
            background: #fee087;
            border-radius: 50%;
            padding-top: 30px;
            margin: 4px;            
        }

        .yellow_circle p{
            color: #333;
            text-align: center;
        }

        .yellow_circle p.people{
            color: #8f721c;
            font-size: 20px;
        }

        .yellow_circle_border{            
            width:130px;
            height:130px;
            border:1px solid #fee087;
            border-radius: 50%;
        }

        .s_col_sm_2{
            width: 160px;
            text-align: center;
        }

        .s_col_sm_2 label{
            padding: 0;
        }

        .col-sm-2{
            font-weight: normal;
        }

        .form-horizontal .form-group{
            padding-top: 15px;
            border-top:1px solid #e4e7e9;
        }

        .help-block{
            margin-top: 10px;
        }

        .ibox-content{
            border:none;
        }
        .tishi{
            margin-top: 7px;
            display: inline-block;
        }

        .alert{
            position:absolute;
            top: -15px;
            left: 8%;
            display:none;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
    	<div class="x_progress" >
            <div class="s_line">
                <div class="s_progress_bar s_current" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                    <span class="sr-only_1">1</span>
                    <p class="x_color_bz">选择发送目标</p>
                </div>
                <div class="s_progress_bar" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                    <span class="sr-only_2">2</span>
                    <p class="x_color_bz">编辑发送内容</p>
                </div>
            </div>
        </div>
        <div  class="row ibox-content" >
            <div class="col-sm-8">
                <p>已有目标选择</p>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <input id="group_keyWord" type="text" placeholder="组名关键字搜索" class="input form-control">
                    <span class="input-group-btn">
                        <button id="keyWordButton" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
                    </span>
                </div>
            </div>
            <div id="costome_group" class="col-sm-12" style="margin-top:10px;">
               
            </div>
            
           
           
        </div>  
        <div class="row ibox-content">
            <%--<form class="form-horizontal">
               <!--  <div  class="form-group">
                    <label class="col-sm-2 control-label">自助筛选发送目标</label>
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary" id="showtoast">筛选</button>
                    </div>
                </div> -->

                <div class="form-group">
                    <label class="col-sm-2 control-label">自定义发送目标</label>
                    <div class="col-sm-3">
                       <!--  <button type="button" class="btn btn-primary" id="showtoast">批量导入号码</button> -->
                         <input
							type="file" class="file" name="file" id="file"
							accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="importDialog()">
                         <span class="help-block m-b-none">已选文件：<span class="text-navy" id="file_name"></span><a hidden="" id="clear_file" class="close-link"><i class="fa fa-times"></i></a></span>   
                         
                    </div>
                    &lt;%&ndash; <div class="tishi col-sm-5" style="position:relative;margin-left: -78px;margin-top: 2px;">
                        <img src="<%=path%>/images/marketing/help.png">
                        <div class="col-sm-4 alert alert-success" style="display: none;">
                            <a href="<%=path%>/excel/customer.xls">客户资料模板</a>
                        </div>
                    </div> &ndash;%&gt;
                    <a href="<%=path%>/excel/template.xlsx" style="position: relative;z-index:22;margin-left: -20px;margin-top: 4px;display: inline-block;">下载导入模板</a>
                </div>
            </form>--%>

            <div class="form-group">
                <div class="col-sm-2 col-sm-offset-5">
                    <button id="next_step" class="btn btn-primary" type="button" >下一步</button>
                </div>
            </div>
        </div>      
    </div>
    <script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/ajaxfileupload.js"></script>
    
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/loading.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript">
    /* var activityId = getUrlParam("activityId"); */
    
    /* function getUrlParam(key){
    	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    } */
    
    $(document).on('ifUnchecked', '.groupChild', function() {
    	$(this).parent().removeClass('checked');
    	$(this).removeAttr("checked");
    	getGroupId();
    }); 
    $(document).on('ifChecked', '.groupChild', function() {
    	$(this).parent().addClass('checked');
    	$(this).attr("checked","checked");
    	getGroupId();
    }); 
    
    $(document).on('ifUnchecked', '#allCustomer', function() {
    	sendObjectType=4;
    	$(this).parent().removeClass('checked');
    	$(this).removeAttr("checked");
    }); 
    $(document).on('ifChecked', '#allCustomer', function() {
    	sendObjectType=0;
    	$(this).parent().addClass('checked');
    	$(this).attr("checked","checked");
    	groupIds="";
    	send_num=this.value;
    	$('.groupChild').parent().removeClass('checked');
    	$('.groupChild').removeAttr("checked");
    }); 
    
    function getGroupId(){
    	send_num=0;
    	groupIds="";
    	$(".lable_group2 .checked").children().each(
				function(i, d) {
					if(StringEmpty(this.id)){
						groupIds=groupIds+","+this.id;
						send_num=parseInt(send_num)+parseInt(this.value);
					}
		 });
    	if(StringEmpty(groupIds)){
    		$('#allCustomer').parent().removeClass('checked');
        	$('#allCustomer').removeAttr("checked");
        	sendObjectType=1;
    	}
    }
    
    
    </script>
    
    <script>
    	//发送对象号码集合
    	var send_object;
    	//发送数量
    	var send_num=0;
    	var id;
    	var type;
    	//搜索分组关键词
    	var keyWord;
    	var startIndex=0;
    	var pageSize=7;
    	//分组id
    	var groupId;
    	//选择 发送目标方式 1分组 2筛选 3导入 0全选
    	var sendObjectType=0;
    	//分组id集合
        var groupIds="";
    	
    	var groupList;
    	var redisKey;

    	//默认设置短信配置
    	var smsInformFlag=1;

    	$(function(){
    		id=getQueryString("id");
    		type=getQueryString("type");
    		if(StringEmpty(id)){
                //编辑;复制
    			getCouponData();
    		}else{
                //新创建
    			getGroup();
    		}
    		
    	});
    	
    	
    	$('#next_step').click(function(){
    		if(type=="create"){
    			create();
    		}else if(type=="edit"){
    			update();
    		}else if(type=="copy"){

    			create();
    		}
    		
    	});
    	$('#clear_file').click(function(){
    		$('#file_name').html("");
    		send_object=null;
    		$('#clear_file').hide();
    		sendObjectType=4;
    	});
    	//搜索组名
    	$('#keyWordButton').click(function(){
    		keyWord=$('#group_keyWord').val();
    		getGroup();
    	});

        //获取分组
        function getGroup(){
            var url="<%=path%>/memberGroup/getCustomerGroup";
            $.post(url, {
                "startIndex" : startIndex,
                "pageSize" : pageSize,
                "keyWord" : keyWord,
                "groupIdsStr":groupIds
            }, function(data) {
                if (data.status == 200) {
                    if(StringEmpty(data.data.groupList)){
                        //已选择的分组数据
                        groupList=data.data.groupList;
                    }
                    setGroupHtml(data.data.otherGroupList,data.data.totalCount);
                }else{
                    errorDialog(data.message);
                }
            });
        }
    	
    	function setGroupHtml(data,totalCount){
    		send_num=totalCount;
    		var html='';
    		html+='<div class="col-sm-2 s_col_sm_2">';
			html+='<div class="yellow_circle_border">';
			html+='<div class="yellow_circle">';
			html+='<p>全部</p>';
			html+='<p class="people">'+totalCount+'<span>人</span></p>';
			html+='</div></div>';
			html+='<div class="form-group">';
			html+='<div class="checkbox i-checks">';
			html+='<label class="lable_group1"><input id="allCustomer" class="groupCustomer" type="checkbox" value="'+totalCount+'" checked=""> <i></i>选择</label>';
			html+='</div></div></div>';
    		if(StringEmpty(groupList)&&groupList.length!=0){
    			sendObjectType=1;
    			for(var i in groupList){
    				html+='<div class="col-sm-2 s_col_sm_2">';
        			html+='<div class="yellow_circle_border">';
        			html+='<div class="yellow_circle">';
        			html+='<p>'+groupList[i].name+'</p>';
        			html+='<p class="people">'+groupList[i].count+'<span>人</span></p>';
        			html+='</div></div>';
        			html+='<div class="form-group">';
        			html+='<div class="checkbox i-checks">';
        			html+='<label class="lable_group2"><input class="groupCustomer groupChild" id="'+groupList[i].id+'" type="checkbox" value="'+groupList[i].count+'" checked="checked"> <i></i>选择</label>';
        			html+='</div></div></div>';
    			}
    			
    		}
    		for(var i in data){
    			html+='<div class="col-sm-2 s_col_sm_2">';
    			html+='<div class="yellow_circle_border">';
    			html+='<div class="yellow_circle">';
    			html+='<p>'+data[i].name+'</p>';
    			html+='<p class="people">'+data[i].count+'<span>人</span></p>';
    			html+='</div></div>';
    			html+='<div class="form-group">';
    			html+='<div class="checkbox i-checks">';
    			html+='<label class="lable_group2"><input class="groupCustomer groupChild" id="'+data[i].id+'" type="checkbox" value="'+data[i].count+'"> <i></i>选择</label>';
    			html+='</div></div></div>';
    		}
    		$('#costome_group').html(html);
    		$(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
    		if(sendObjectType!=0){
				$('#allCustomer').parent().removeClass('checked');
		    	$('#allCustomer').removeAttr("checked");
			}
    		if(sendObjectType==1){
    			getGroupId();
    		}
    	}




        //获取优惠券分组和人数数据
        function getCouponData(){
        	var url="<%=path%>/socialCouponBatch/ajaxCouponBatchDetail";
    		$.post(url, {
    			"id" : id
    		}, function(data) {
    			if (data.status == 200) {
                    sendObjectType=data.data.sendObjectType;//被复制优惠券的发送对象类型
    				send_num=data.data.customerNum;
    				groupIds=data.data.groupId;
    				if(sendObjectType==3){
    					$('#file_name').html("已选发送目标"+send_num+"人");
    					$('#clear_file').show();
    				}
    				var groupIdArray=groupIds.split(',');
    				var groupCount=groupIdArray.length;

    				if(data.data.sendObjectType==1 && groupCount==0){
    					sendObjectType=4;
    				}
        			
    				if(groupCount>0) {
                        pageSize = pageSize - groupCount;
                    }
    				getGroup();
    			}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
        
        
    	
        //创建优惠券
        function create(){
        	if(StringEmpty(groupIds)){
        	    //将字符串第一个逗号删除
        		groupIds=groupIds.replace(",","");
        	}
        	if(sendObjectType==4){
        		errorDialog("请选择发送目标！");
        		return "";
        	}
        	var url="<%=path%>/socialCouponBatch/ajaxCreateCouponBatch";
    		$.post(url, {
    			"customerNum" : send_num,
    			"sendObjectType":sendObjectType,
                "smsInformFlag":smsInformFlag,
    			"groupId":groupIds
    		}, function(data) {
    			if (data.status == 200) {
    				var this_id=data.data;
    				if(type=="copy"){
    					window.location.href = "<%=path%>/view/coupon/couponBatchEdit?type=copy&id="+this_id+"&copyId="+id;
    	    		}else if(type=="create"){
	    	    		window.location.href = "<%=path%>/view/coupon/couponBatchEdit?id="+this_id+"&type=create";
    	    		}else{
    	    			window.location.href = "<%=path%>/view/coupon/couponBatchEdit?type=edit&id="+this_id;
    	    		}
    			}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
        
        
        //上传电话号码文件
        function import_excle_info(handleType){
        	var file = $("#file").val();
            var fileName = getFileName(file); 
        	
    		if($("#file").val() != null && $("#file").val() != ''){
    			$.ajaxFileUpload({
    		        url:'<%=path%>/socialSmsBatch/importPhone?uid='+uid+"&access_token"+access_token+"&cid="+cid+"&handleType="+handleType,
    		        secureuri :false,
    		        fileElementId :'file',//file控件id
    		        dataType : 'json',
    		        success : function (data){
    		        	console.log("---------->"+data.error_code);
    		        	if(data.error_code==0){
    		        		send_num=data.totalCount;
    		        		redisKey=data.redisKey;
    		        		$('#file_name').html(fileName+"共"+send_num+"人");
    		        		$('#clear_file').show();
    		        		sendObjectType=3;
    		        		$('.groupCustomer').removeAttr("checked");
    		        		$('.groupCustomer').parent().removeClass("checked");
    		        		
    		        		groupIds="";
    		        	}else if(data.error_code=="20028"){
    		        		loginDialog();
    		        	}else{
    		        		errorDialog(data.message);
    		        	}
    		       }
    			}); 
    		}else{
    			errorDialog("请选择导入文件！");
    		}
    	}
        
        
       
        //更新注券批次
        function update(){
        	if(StringEmpty(groupIds)){
        		groupIds=groupIds.replace(",","");
        	}
        	if(sendObjectType==4){
        		errorDialog("请选择发送目标！");
        		return "";
        	}
        	var url="<%=path%>/socialCouponBatch/ajaxUpdateCouponBatch";
    		$.post(url, {
    			"id" : id,
    			"customerNum" : send_num,
    			"sendObjectType":sendObjectType,
    			"groupIds":groupIds
    		}, function(data) {
    			if (data.status == 200) {
                    window.location.href='<%=path%>/view/coupon/editSendContent?type=edit&id='+id;
    			}else{
	        		errorDialog(data.message);
	        	}
    		});
        }
        
        
        //是否要导入客户
        function importDialog(){
			swal({
				  title: '是否将数据存储到会员中心?',
				  text: "点击是，数据将会同时存储到会员中心！",
				  type: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#d33',
				  cancelButtonColor: '#3085d6',
				  confirmButtonText: '是',
				  cancelButtonText:'否'
				}).then(function () {
					 import_excle_info(1);
				},function (dismiss) {
				  if (dismiss === 'cancel') {
					  import_excle_info(0);
				  }
				})
		}
        
        $(function(){
            $('.tishi img').mouseover(function(){
                $(this).parent().find('.alert').show();
            });
            $('.tishi img').mouseout(function(){
                $(this).parent().find('.alert').hide();
            });
        })
        function getFileName(o){
		    var pos=o.lastIndexOf("\\");
		    return o.substring(pos+1);  
		}
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8">
    </script>
</body>
</html>
